<script setup lang="ts">
const props = defineProps<{
  goodName: string,
  goodInfo: string,
  fontColor: string
}>()
</script>

<template>
  <div class="goodtitlecontainer" :style="{ color: fontColor }">
    <div class="goodname">{{ goodName }}</div>
    <div class="goodinfo">
      <h1>{{ goodInfo }}</h1>
      <p></p>
    </div>
    <div class="goodguide">
      <div>进一步了解 <i class="fa fa-angle-right" style="font-size:28px"></i> </div>
      <div>购买 <i class="fa fa-angle-right" style="font-size:28px"></i></div>
    </div>
  </div>
</template>

<style scoped lang="less">
.goodtitlecontainer {
  position: absolute;
  top: 10%;
  left: 50%;
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 0;
  font-size: 2em;
  z-index: 999;

  .goodname {
    display: flex;
    flex-direction: column;
    align-items: center;
    font-size: 1.8em;
    font-weight: 800;
    margin-bottom: 20px;
  }

  .goodinfo {
    h1 {
      font-size: 1.2em;
      margin-bottom: 30px;
    }
  }

  .goodguide {
    div {
      cursor: pointer;
      font-size: .6em;
      margin-bottom: 10px;
      color: rgb(40, 151, 255);
      transition: all .4s;

      &:hover {
        transform: translateX(5px);
      }
    }
  }

}

@media only screen and (max-width: 800px) {}
</style>
